<template lang="pug">
div(v-if='unit')
  Form(ref='form', :model='formData', :label-width=80, :rules='rules', action='javascript:;')
    FormItem(label='标题', prop='title')
      Input(v-model='formData.title')
    FormItem(label='URL地址', prop='media_url')
      //- Input(v-model='formData.media_url')
      div(v-show='!lockUrl')
        Input(v-model='formData.media_url', :disabled='!editable')
      div(v-show='lockUrl')
        oss-uploader(:defaultValue='file', @upload='ossUploaded')
      div(style='margin-top: 3px;')
        span 请上传mp4视频或mp3音频。
        a(@click='lockUrl = !lockUrl') {{ lockUrl ? '手动填写地址' : '上传文件' }}

    FormItem(label='时长', prop='media_length')
      Input(v-model='formData.media_length', number, placeholder='媒体播放时长', style='width: 120px')
        span(slot='append') 秒
    FormItem
      Button(type='primary', html-type='submit', @click='submit', :loading='submitting') 保存
      | &nbsp;&nbsp;
      Button(type='ghost', @click='$router.go(-1)') 取消

</template>

<script>
import mediaApi from '@/apis/media'
import OSS from '@/libs/oss'
import OSSUploader from '@/components/OSSUploader'

export default {
  beforeRouteEnter (to, from, next) {
    const { id, delta } = to.params
    mediaApi.getMediaUnitDetail(id, delta)
      .then(unit => next(vm => {
        vm.unit = unit
        vm.formData.title = unit.title
        vm.formData.media_url = unit.media_url
        vm.formData.media_length = parseInt(unit.media_length) || 0
      }))
  },
  components: {
    'oss-uploader': OSSUploader
  },
  data () {
    const { id, delta } = this.$route.params

    return {
      lockUrl: true,
      submitting: false,
      unit: {},
      formData: {
        id,
        delta,
        media_url: ''
      },
      rules: {
        title: { required: true, message: '请填写标题' },
        media_url: { required: true, message: '请填写媒体地址' },
        media_length: { type: 'integer', message: '请填写整数，勿带小数位' }
      }
    }
  },
  computed: {
    file () {
      if (typeof this.unit.media_url === 'string') {
        return {
          name: this.unit.media_url.split('/').pop()
        }
      }
    },
    editable () {
      return this.formData.media_url.indexOf('oss://') === -1
    }
  },
  mounted () {
  //   const { id, delta } = this.$route.params
  //   mediaApi.getMediaUnitDetail(id, delta)
  //     .then(unit => {
  //       this.unit = unit
  //       this.formData.title = unit.title
  //       this.formData.media_url = unit.media_url
  //       this.formData.media_length = unit.media_length
  //       // this.formData.desc = unit.desc
  //       // this.formData.media_id = unit.media_id
  //       // this.formData.fid = unit.fid
  //       // this.formData.title = unit.title
  //     })
    OSS.getClient().then(client => (this.client = client))
  },
  methods: {
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitting = true
          mediaApi.patchMediaUnit(this.formData)
            .then(() => this.$router.replace({
              name: 'media-unit-list',
              params: { id: this.$route.params.id }
            }))
        }
      })
    },
    ossUploaded (res) {
      this.lockUrl = true
      this.formData.media_url = 'oss://' + res.name
    }
  }
}
</script>
